<script setup lang="ts" name="registForm">
import useRegistForm from '@/components/login/hooks/registForm'
import type { RegistFormDataExport } from '@/types/loginType'
const { form, getRegistFormData } = useRegistForm()
defineExpose<RegistFormDataExport>({
  getRegistFormData
})
</script>

<template>
  <form ref="form">
    <p>
      <label for="username">用户名:</label>
      <input type="text" name="username" id="username" />
    </p>
    <p>
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" />
    </p>
    <p>
      <label for="confirm">确认密码:</label>
      <input type="password" name="confirm" id="confirm" />
    </p>
  </form>
</template>

<style lang="less" scoped>
form {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  p {
    width: 350px;
    vertical-align: middle;
    label {
      display: inline-block;
      text-align: right;
      white-space: nowrap;
      width: 100px;
      font-size: 20px;
      color: #fdfcdc;
    }
    input {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      margin: 16px 10px;
      width: 200px;
      height: 34px;
      padding: 0 6px;
      box-sizing: border-box;
      border: none;
      border-radius: var(--radius);
    }
    input:focus {
      outline: none;
    }
  }
}
</style>
